<!-- 搜索-操作 -->
<template>
  <div class="component-container h-search-for-operation">
    <div class="model-select-wrap">
      <div class="pic-style-wrap">
        <a-form ref="operationFormRef" :model="currentTemp" label-width="125px">
          <a-row>
            <a-col :span="24">
              <a-form-item label="选择模板" prop="type">
                <a-radio-group v-model="currentTemp.type">
                  <a-radio v-for="dict in typeList" :key="dict.value" :value="dict.value">
                    {{ dict.label }}
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="搜索图标" prop="searchIcon">
                <a-switch
                  v-model="currentTemp.searchIcon"
                  style="--a-switch-on-color: #00a9ac; --a-switch-off-color: #bfbfbf"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="搜索按钮" prop="searchBtn">
                <a-switch
                  v-model="currentTemp.searchBtn"
                  style="--a-switch-on-color: #00a9ac; --a-switch-off-color: #bfbfbf"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="搜索框背景色" prop="boxBgColor">
                <!-- <a-color-picker show-alpha v-model="currentTemp.boxBgColor" /> -->
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="搜索框圆角(px)" prop="radiusNum">
                <a-slider
                  v-model="currentTemp.radiusNum"
                  show-input
                  style="width: 100%"
                  :min="0"
                  :max="100"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, computed, watch } from 'vue'
  const emit = defineEmits(['change'])
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const typeList = ref([
    {
      label: '搜索框',
      value: 0,
    },
    {
      label: '左右结构',
      value: 1,
    },
    {
      label: '左中右结构',
      value: 2,
    },
  ])

  const currentTemp = computed(() => props.config)
  console.log(currentTemp.value)
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )
</script>
<style lang="less">
  .h-search-for-operation {
    width: 100%;
    p {
      margin: 0;
      padding: 0;
    }
    .bg-color-img-wrap {
      .a-form-item__content {
        align-items: baseline;
      }
    }
  }
</style>
